<template>
  <div id="Login">
    <div class="login_box">
      <span class="light"></span><span class="light"></span
      ><span class="light"></span><span class="light"></span>
      <div class="title">
        <h2>登录</h2>
      </div>
      <el-form :model="form" label-width="20px" label-position="right">
        <el-form-item>
          <el-input placeholder="用户名" v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="密码"
            v-model="form.passWord"
            show-password
            @keyup.enter="goLogin"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="login_btn">
        <el-button @click="goLogin">登 录</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref } from "vue";
import { signIn } from "@/api/Login/index.ts";
import { Session } from '@/utils/storage';

const router = useRouter();
interface Form {
  userName: string;
  passWord: string;
}
const form = ref<Form>({
  userName: "",
  passWord: "",
});

// 登录请求
const goLogin = async () => {
  const { data } = await signIn(form.value);
  if (data.code != 200) return ElMessage.warning(data.message);
  ElMessage.success(data.message)
  Session.set('token',data.data.token)
  router.push('Home')
};
</script>

<style scoped lang="scss">
#Login {
  background-image: url("@/assets/images/bgImg.png");
  background-size: cover;
  background-position: center;
  min-height: 100vh; /* 确保至少为视口高度 */
  height: 100%;
  .login_box {
    width: 400px;
    height: 385px;
    margin: 0 auto;
    transform: translateY(50%);
    // transform: ;
    background-color: #1d294d;
    box-shadow: 1px 1px 108.8px 19.2px #191f35;
    position: relative;
    overflow: hidden;
    padding: 4px;
    border-radius: 8px;
    .title {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      h2 {
        color: #fff;
      }
    }
    .el-form {
      margin-top: 35px;
      padding: 15px;
      .el-form-item {
        padding: 15px;
      }
      .el-input {
        border-radius: 5px;
      }
      :deep(.el-input__wrapper) {
        background-color: #222f55;
        box-shadow: none;
      }
      :deep(.el-input__wrapper.is-focus) {
        box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset !important;
      }
      :deep(.el-input__inner) {
        color: #fff;
      }
    }
    .login_btn {
      margin-top: 35px;
      display: flex;
      justify-content: center;
      .el-button {
        width: 340px;
        height: 49px;
        border-radius: 100px;
        background-color: #8457ff;
        color: #fff;
        font-size: 18px;
        border: none;
        &:hover {
          background-color: #632bff;
        }
      }
    }
  }
}
.light {
  position: absolute;
  display: block;
}
.light:nth-child(1) {
  filter: hue-rotate(0deg);
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #0086ee);
  animation: animate1 8s linear infinite;
}

@keyframes animate1 {
  0% {
    left: -100%;
  }

  50%,
  100% {
    left: 100%;
  }
}
.light:nth-child(2) {
  filter: hue-rotate(60deg);
  top: -100%;
  right: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #0086ee);
  animation: animate2 8s linear infinite;
  animation-delay: 2s;
}

@keyframes animate2 {
  0% {
    top: -100%;
  }

  50%,
  100% {
    top: 100%;
  }
}
.light:nth-child(3) {
  filter: hue-rotate(120deg);
  bottom: 0;
  right: 0;
  width: 100%;
  background: linear-gradient(270deg, transparent, #0086ee);
  animation: animate3 8s linear infinite;
  animation-delay: 4s;
}

@keyframes animate3 {
  0% {
    right: -100%;
    height: 3px;
  }

  50%,
  100% {
    height: 2px;
    right: 100%;
  }
}
.light:nth-child(4) {
  filter: hue-rotate(300deg);
  bottom: -100%;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #0086ee);
  animation: animate4 8s linear infinite;
  animation-delay: 6s;
}

@keyframes animate4 {
  0% {
    bottom: -100%;
  }

  50%,
  100% {
    bottom: 100%;
  }
}
</style>
